import React, { useState, useEffect } from 'react';
import styles from './index.less';
import moment from 'moment';
import { history } from 'umi';
import { Dropdown } from 'antd';
import type { MenuProps } from 'antd';

export default function Header(props: any) {
  const { info } = props;
  const [dateTime, setDateTime] = useState<string>('');
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <span
          onClick={() => {
            window.localStorage.setItem('userInfo', '');
            history.push('/login');
          }}
        >
          退出登录
        </span>
      ),
    },
  ];
  const getDateWeek = () => {
    let d = moment().format('YYYY-MM-DD HH:mm');
    return `${d}`;
  };
  useEffect(() => {
    let timer: any = null;
    setDateTime(getDateWeek());
    timer = setInterval(() => {
      setDateTime(getDateWeek());
    }, 60000);
    return () => {
      clearInterval(timer);
      timer = null;
    };
  }, []);
  return (
    <div className={styles.timBo}>
      <div className={styles.stateBox}>
        <span className={styles.state1}>
          开启<span className={styles.dian}></span>
        </span>
        <span className={styles.state2}>
          关闭<span className={styles.dian}></span>
        </span>
        <span className={styles.state3}>
          停用<span className={styles.dian}></span>
        </span>
        <span className={styles.state4}>
          故障(离线)<span className={styles.dian}></span>
        </span>
      </div>
      <div className={styles.titleC}>当前时间：{dateTime}</div>
    </div>
  );
}
